<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SSE Client</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        #markdownContent {
            height: 400px;
            border: 1px solid #ccc;
            padding: 10px;
            overflow-y: scroll;
            margin-bottom: 20px;
            background-color: #f9f9f9;
            font-size: 14px;
            line-height: 1.4;
        }

        /* 调整各级标题的大小 */
        #markdownContent h1 {
            font-size: 18px;
        }
        #markdownContent h2 {
            font-size: 16px;
        }
        #markdownContent h3 {
            font-size: 15px;
        }
        /* 调整代码块大小 */
        #markdownContent pre, #markdownContent code {
            font-size: 13px;
        }

        #markdownContent h1, #markdownContent h2, #markdownContent h3 {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }
        #markdownContent pre {
            background-color: #f0f0f0;
            padding: 10px;
            border-radius: 3px;
            overflow-x: auto;
        }
        #markdownContent code {
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
        }
        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }

        button {
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #45a049;
        }
        /* 新增的输入框和发送按钮样式 */
        #messageInput {
            padding: 8px;
            width: 300px;
            margin-right: 10px;
        }
        #sendBtn {
            background-color: #2196F3;
        }
        #sendBtn:hover {
            background-color: #0b7dda;
        }
    </style>
</head>
<body>
<h1>网页端MCP客户端测试页面</h1>

<div id="markdownContent"></div>

<div style="margin-top: 20px;">
    <input type="text" id="messageInput" placeholder="请输入你要发的消息">
    <button id="sendBtn">发送</button>
</div>

<script>
    let eventSource;

    marked.setOptions({
        breaks: true,
        gfm: true     // 支持 GitHub Flavored Markdown
    });

    let markdownText ="";

    function logEvent(message, appendToLastLine = false) {
        if(appendToLastLine){
            markdownText += message;
        }else{
            markdownText += message + "\n\n";
        }

        markdownContent.innerHTML = marked.parse(markdownText);
        markdownContent.scrollTop = markdownContent.scrollHeight;
    }

    function connectionReady(){
        eventSource = new EventSource('/sse/events');

        eventSource.onmessage = (e) => {
            logEvent(e.data,true);
        };

        eventSource.onerror = (e) => {
            logEvent("SSE Error: 连接断开。 ");
        };
    }

    document.getElementById('sendBtn').addEventListener('click', () => {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value.trim();

        if (message) {
            const params = new URLSearchParams();
            params.append('message', message);
            fetch('/sse/send', {
                method: 'POST',
                headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: params
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));

            messageInput.value = '';
        } else {
            alert('请输入你要发的消息');
        }
    });

    document.getElementById('messageInput').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            document.getElementById('sendBtn').click();
        }
    });

    connectionReady();
</script>
</body>
</html>